
/*
 * @Author: liangshuchang
 * @Description:  司机或者货主信息组件
 */
import React from 'react';
import {
    View,
    StyleSheet,
    Image,
    Text,
    SafeAreaView,
    TouchableOpacity,
} from 'react-native';
import {
    px2dp, isAndroid, fontColorLightGray,
} from '../../../common/styles/index';
import VerticalLine from '../shipper-app/source/components/VerticalLine';
import px2wp from '../../../common/utils/px2wp';
import { defaultman, iconCaveatGreen, iconRightGray } from '../../../image';
export default class DriverInformation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    onDriverDetail = (data) => {
        this.props.onDriverDetail && this.props.onDriverDetail(data);
    }
    render() {
        const { information, style, title } = this.props;
        return (
            <View style={[styles.containers, style]}>
                <View style={styles.hTitle}>
                    <Text style={{ color: '#333232', fontSize: px2dp(16) * 2 }}>{title}</Text>
                </View>
                <TouchableOpacity
                    activeOpacity={0.8}
                    style={[styles.hItem]}
                    onPress={this.onDriverDetail}
                >
                    <View style={styles.flex}>
                        {
                            information.head && information.head !== '' ?
                                <Image
                                    style={{ width: px2wp(60), height: px2wp(60), borderRadius: px2dp(8) }}
                                    source={{ uri: information.head }}
                                /> : <Image
                                    style={{ width: px2wp(60), height: px2wp(60), borderRadius: px2dp(8) }}
                                    source={defaultman}
                                />
                        }
                        <View style={styles.flexCl}>
                            <View style={[styles.flexC, { marginLeft: px2wp(16) }]}>
                                <Text style={{ color: '#333232', fontSize: px2dp(16) * 2 }}>{information.name}11</Text>
                                <View style={[styles.oval, styles.ml20, styles.flexC]}>
                                    <Image
                                        style={{ width: px2dp(22), height: px2dp(22), marginRight: px2wp(4) }}
                                        source={iconCaveatGreen}
                                        resizeMode="stretch"
                                    >
                                    </Image>
                                    <Text style={styles.cSuccess}>已认证</Text>
                                </View>
                            </View>
                            <View style={[{ marginLeft: px2wp(16) }]}>
                                {information.wayBillCount >= 10000 ? (
                                    <Text>运单 &nbsp;{(11002 / 10000).toFixed(1)}</Text>
                                ) : (
                                        <Text>运单 &nbsp;{information.wayBillCount}</Text>
                                    )}

                            </View>
                        </View>
                    </View>
                    <View>
                        <Image
                            style={{ width: px2wp(16), height: px2wp(16) }}
                            source={iconRightGray}
                            resizeMode="stretch"
                        >
                        </Image>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    containers: {
        backgroundColor: '#fff',
        borderRadius: px2dp(20),
        marginLeft: px2dp(20),
        marginRight: px2dp(20),
        marginBottom: px2dp(20),
        marginTop: px2dp(20),
        paddingLeft: px2dp(20),
        paddingRight: px2dp(20),
        paddingTop: px2dp(20),
        paddingBottom: px2dp(20)
    },
    hTitle: {
        paddingBottom: px2dp(20),
        borderBottomWidth: px2dp(2),
        borderBottomColor: '#E6E3E1',
        marginBottom: px2dp(20),
        color: '#333232',
        fontSize: px2dp(16) * 2
    },
    hItem: {
        flexDirection: 'row',
        marginTop: px2dp(6),
        marginBottom: px2dp(6),
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    oval: {
        paddingLeft: px2dp(16),
        paddingRight: px2dp(16),
        paddingTop: px2dp(4),
        paddingBottom: px2dp(4),
        borderRadius: px2dp(28),
        backgroundColor: 'rgba(44, 189, 38, 0.1)'
    },
    flex: {
        flexDirection: 'row',
    },
    ml20: {
        marginLeft: px2wp(20)
    },
    flexC: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    flexCl: {
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
    cSuccess: {
        color: '#2CBD26',
        fontSize: px2dp(11) * 2
    }
});
